<template>
	<view class="main" style="background-color: #FAFAFA;">
		<u-line></u-line>
		<u-overlay :show="passValue" :mask-click-able="false" :opacity="0.2">
			<view class="warp" style="display: flex;justify-content: center;align-items: center;margin-top: 39vh;">
				<view
					style="width: 130px;height: 130px;background-color: #000;border-radius: 10px;display: flex;align-items: center;justify-content: center;opacity:0.7">
					<u-loading-icon mode="semicircle" size="60" color="#FFF" :vertical="true" text="正在加载"
						textColor="#FFF"></u-loading-icon>
				</view>
			</view>
		</u-overlay>
		<view class="detail_container" v-show="!passValue">
			<view class="detail_content" style="background-color: #FFFFFF;">
				<view class="detail_title" style="padding: 10px;font-size: 16px;font-weight: 800;">
					{{"复核"}}
				</view>
				<u-line></u-line>
				<view class="detail_x" style="padding: 0px 10px 10px 10px;">
					<view class="detail_tag" v-for="(xtag,index) in data" :key="index">
						<view class="tag_1" v-show="index!=3 && index!=4"
							style="display: flex;align-items:flex-start;font-size: 14px;margin-top: 10px;">
							<view class="1a" style="color: #999;width: 80px;">
								{{xtag.name}}
							</view>
							<view class="1b" style="color: #333;flex:1;text-align: right;">
								{{xtag.value}}
							</view>
						</view>
						<view class="tag_2" v-show="index==3 || index==4"
							style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 10px;">
							<view class="2a" style="color: #999;">
								{{xtag.name}}
							</view>
							<view class="2b" style="color: #333;">
								{{xtag.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="recheck_content" style="background-color: #FFFFFF;margin-top: 15px;padding-bottom: 15px;">
				<view class="detail_title" style="padding: 10px;font-size: 16px;font-weight: 800;">
					{{"复核意见"}}
				</view>
				<u-line></u-line>
				<view class="content">
					<view class="ca" style="margin: 0px 10px 15px 10px;">
						<view class="x" style="margin-top: 10px;color: #999;">复核结果说明</view>
						<view class="ae">
							<u--textarea v-model="fhTxt" count height="100px" maxlength='2000'
								style="margin-top: 12px;"></u--textarea>
						</view>
					</view>
					<u-line></u-line>
					<view class="cb" style="margin: 10px 10px 0px 10px;">
						<view class="x" style="color: #999;">附件</view>
						<view class="be"
							style="border: 1px solid #ceccca;height: 72px;margin-top: 12px;display: flex;border-radius: 4px;">
							<view class="aaa" style="display: flex;" v-for="(item,index) in fileTempList" :key="index">
								<view style="position: relative; margin-top: 8px; margin-left: 8px;">
									<u--image :src="item.url" width="55px" height="55px"></u--image>
									<u-icon name="close" style="position: absolute; top: 2px; right: 2px;"
										@click="removeItem(index)"></u-icon>
								</view>
							</view>
							<u--image :src="upLoadUrl" @click="getFile" v-show="fileTempList.length<5" width="55px"
								height="55px" style="margin-top: 8px;margin-left: 8px;"></u--image>
						</view>
					</view>
				</view>
				<view class="bottom" style="margin: 24px 10px 0px 10px;">
					<u-button @click="submit" text="提 交" color="#FF5000" style="border-radius: 4px;"></u-button>
					<u-button @click="reset" text="重 置" color="#FF5000" plain
						style="margin-top: 8px;border-radius: 4px;"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../../common/wst_hydra-1.0.0.js');


	import {
		pipecheckDetail,
		uploadFile,
		pipecheckRecheck
	} from '@/common/api.js'
	export default {
		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.id = option.id
			this.reqData.id = option.id
		},
		onShow() {
			document.body.style.overflow = 'auto'
			this.getGwzdDetailById()
		},
		data() {
			return {
				id: '',
				data: [{
						name: '项目名称',
						value: ''
					},
					{
						name: '设备编号',
						value: ''
					},
					{
						name: '监测地址',
						value: ''
					},
					{
						name: '监测总流量(m³)',
						value: ''
					},
					{
						name: '最大瞬时流量(m³/h)',
						value: ''
					},
					{
						name: '开始时间',
						value: ''
					},
					{
						name: '复核状态',
						value: ''
					},
				],
				upLoadUrl: require("@/static/icons/xjyw/add.png"),
				reqData: {
					id: '',
					fhsm: '',
					fhfj: ''
				},

				fhTxt: '',
				fileNum: null,
				/* 图片暂存列表 */
				fileTempList: [],
				/* 图片格式 */
				ijpeg: 'image/jpeg',
				ipng: 'image/png',
				passValue: true
			}
		},
		methods: {
			getGwzdDetailById() {
				pipecheckDetail({
					id: this.id
				}).then(res => {
					this.data[0].value = res.xmmc
					this.data[1].value = res.sbbh
					this.data[2].value = res.jcdz
					this.data[3].value = res.jczll
					this.data[4].value = res.maxll
					this.data[5].value = res.kssj
					this.data[6].value = res.sffh == '0' ? '未复核' : '已复核'
					this.passValue = false
				})
			},

			getFile() {
				let that = this
				window.croods.customPlugin({
					action: 'ServicePermissionPlugin.uploadMaterial',
					params: {
						reason: "获取相机、文件权限",
						imgCount: "1",
						uploadTitle: "请选择上传方式",
						uploadType: "4",
					},
					success: function(res) {
						let tfile = res.files[0]
						if (res.flag) {
							let temp = tfile.file.replace(/[\r\n]/g, "")
							let url = 'data:' + tfile.type + ';base64,' + temp
							tfile.url = url
							that.fileTempList.push(tfile)
						} else {
							that.$u.toast('格式错误，上传失败');
						}
					},
					fail: function(msg) {
						if (msg != null || msg != undefined) {
							that.$u.toast(msg);
						} else {
							that.$u.toast('照片上传失败');
						}
					}
				});
			},
			removeItem(index) {
				this.fileTempList.splice(index, 1);
			},
			async getIds() {
				let that = this
				let fj = '';
				/* 皖事通令牌 */
				let promises = that.fileTempList.map(async item => {
					let temp = {
						bizType: "app",
						file: item.file,
						fileName: item.name,
						fileType: item.type
					}
					let res = await uploadFile(temp);
					if (res != undefined || res != null) {
						fj += res.id + ';'
					}
				})
				await Promise.all(promises);
				return fj;
			},

			/* 重置 */
			reset() {
				this.fhTxt = ''
				this.fileNum = null
				this.fileTempList = []
			},

			/* 提交 */
			async submit() {
				let that = this
				if (that.fhTxt == '' && that.fileTempList.length == 0) {
					uni.$u.toast('复核说明、复核附件至少填写一项')
					return
				}
				if (that.fileTempList.length != 0) {
					that.reqData.fhfj = await that.getIds()
				}
				that.reqData.fhsm = that.fhTxt
				pipecheckRecheck(that.reqData).then(res => {
					if (res.msg == '200' && res.msgId == that.reqData.id) {
						that.$u.toast('提交成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					} else {
						that.$u.toast('提交失败');
					}
				})

			}

		},
		mounted() {}
	}
</script>

<style>

</style>